<template>
  <view>
    <view class="main" style="background-color: #fff">
      <view class="header">
        <view class="searchBox" @click="goPage('/pages/home/searchPage')">
          <up-input placeholder="搜索内容" border="none" readonly shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #A8A8A8"></up-input>
        </view>
        <view class="gcList">
          <view v-for="(item, index) in gcList" :key="index" @click="goFactoryFn(item, '0')">
            <image class="img" :src="item.image" mode="scaleToFill" />
            <view class="name">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="main">
      <view class="commonBox">
        <CommonTitle title="热门工厂" />
        <u-scroll-list :indicator="false">
          <view v-for="(item, index) in hotIndustry" :key="index">
            <view class="gcListBox">
              <view class="header">
                <image src="../../static/findJob/rmgc.png" mode="scaleToFill" />
                <view class="right">
                  <view class="title">{{ item.industryName }}</view>
                  <view class="info">已有{{ item.viewedCount }}人查看</view>
                </view>
              </view>
              <view class="gcNameList">
                <template v-if="item.list.length > 0">
                  <view class="item" v-for="(i, index) in item.list" @click="goFacPage(i)" :key="index">
                    <view class="firstText">{{ i.name[0] }}</view
                    >{{ i.name }}
                  </view>
                </template>
                <view v-else style="width: 100%; display: flex; justify-content: center">
                  <u-empty mode="list"></u-empty>
                </view>
              </view>
              <view @click="goFactoryFn(item, '1')" v-if="item.list.length > 0" class="lookMoreBtn">查看更多 <u-icon name="arrow-down" color="#bebebe"></u-icon> </view>
            </view>
          </view>
        </u-scroll-list>
      </view>
      <template v-if="factoryList?.length > 0">
        <CompanyCard @boxClick="boxClick(item)" v-for="(item, index) in factoryList" :key="index" :info="item" :isBtn="false" />
        <u-loadmore height="30" :status="status" />
      </template>
      <view v-else style="width: 100%; display: flex; justify-content: center">
        <u-empty mode="list"></u-empty>
      </view>
    </view>

    <!-- <image src="../../static/findJob/gg.png" class="fixGgImg" mode="scaleToFill" /> -->
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import CommonTitle from "../../components/commonTitle.vue";
import CompanyCard from "../../components/companyCard.vue";
import { goPage } from "../../utils/commonFn";
import { getIndustryList } from "@/api/my";
import { findFactory, getHotIndustry } from "@/api/home";
//@ts-ignore
import { onReachBottom } from "@dcloudio/uni-app";
const gcList = ref([
  {
    id: 999,
    image: "../../static/findJob/rmtj.png",
    name: "热门推荐",
    isActive: false,
  },
]);
const hotIndustry = ref<HomeTypes.hotIndustry>();
onMounted(async () => {
  uni.showLoading({
    title: "加载中",
  });
  const res = await getIndustryList();
  res.data.forEach((item) => {
    item.list.forEach((i) => {
      gcList.value.push(i);
    });
  });
  const res1 = await getHotIndustry();
  hotIndustry.value = res1.data;
  rest();
});
const goFactoryFn = (item: any, hotFlag: string) => {
  if (item.name === "热门推荐") {
    goPage("/pages/home/factoryRecommendation");
  } else {
    goPage(`/pages/home/factoryRecommendation?id=${item.id}&hotFlag=${hotFlag}`);
  }
};
const goFacPage = (i: any) => {
  if (uni.getStorageSync("userInfo").level !== "1") {
    uni.showModal({
      title: "提示",
      cancelText: "取消",
      confirmText: "开通会员",
      content: "您未开通会员，暂时无法查看",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/activateMembership");
        }
      },
    });
    return;
  }
  goPage(`/pages/findJob/factoryDetails?id=${i.id}`);
};
const formData = ref({
  pageNum: 1,
  pageSize: 10,
});
const status = ref("loadmore");
const factoryList = ref<HomeTypes.factoryList[]>([]);
const getList = async () => {
  status.value = "loadmore";
  const res = await findFactory(formData.value);
  factoryList.value = factoryList.value.concat(res.rows);
  if (factoryList.value.length >= (res.total as number)) {
    status.value = "nomore";
  } else {
    status.value = "loadmore";
  }
  uni.hideLoading();
};
const rest = () => {
  formData.value.pageNum = 1;
  factoryList.value = [];
  status.value = "loadmore";
  getList();
};
onReachBottom(() => {
  formData.value.pageNum++;
  getList();
});
const boxClick = (info: HomeTypes.factoryList) => {
  if (uni.getStorageSync("userInfo").level !== "1") {
    uni.showModal({
      title: "提示",
      cancelText: "取消",
      confirmText: "开通会员",
      content: "您未开通会员，暂时无法查看",
      success: function (res) {
        if (res.confirm) {
          goPage("/pages/myPage/activateMembership");
        }
      },
    });
    return;
  }
  goPage(`/pages/findJob/factoryDetails?id=${info.id}`);
};
</script>

<style lang="less" scoped>
.header {
  .searchBox {
    /deep/ .u-input {
      width: 100%;
      background: #f7f8fa;
      padding: 12rpx !important;
      margin-right: 10rpx;
    }
  }

  .gcList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120rpx, 1fr)); /* 自适应列布局 */
    gap: 12px; /* 子元素之间的间距 */
    text-align: center;
    margin-top: 32rpx;
    .img {
      width: 72rpx;
      height: 72rpx;
      margin-bottom: 16rpx;
    }
    .name {
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 34rpx;
    }
  }
}
.gcListBox {
  width: 434rpx;
  height: 530rpx;
  background: #f5f7f9;
  border-radius: 0rpx 0rpx 16rpx 16rpx;
  margin-top: 32rpx;
  margin-right: 20rpx;
  .header {
    padding: 28rpx 24rpx;
    background: #272d38;
    border-radius: 16rpx 16rpx 0rpx 0rpx;
    display: flex;
    align-items: center;
    image {
      width: 56rpx;
      height: 56rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
    }
    .right {
      .title {
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 40rpx;
      }
      .info {
        font-size: 24rpx;
        font-weight: 500;
        color: #767a81;
        line-height: 34rpx;
      }
    }
  }
  .gcNameList {
    height: 260rpx;
    overflow: auto;
    padding: 34rpx 28rpx;
    .item {
      width: 100%;
      display: flex;
      align-items: center;
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #1e1e1e;
      line-height: 36rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      margin-bottom: 34rpx;
      .firstText {
        background: #eea138;
        border-radius: 8rpx;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 40rpx;
        text-align: center;
        padding: 5rpx 8rpx;
        margin-right: 10rpx;
      }
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }
}
.fixGgImg {
  width: 188rpx;
  height: 206rpx;
  position: fixed;
  right: 0;
  bottom: 200rpx;
}
.lookMoreBtn {
  color: #bebebe;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
